import React, {Component} from 'react';
//import pureRender from 'pure-render-decorator';
import {History, Link } from 'react-router';
import { connect } from 'react-redux';
import { CostGet } from '../Redux/Actions/costAction';
import { is, fromJS} from 'immutable';
import {Imglist} from './common/img';

class Cost extends Component {
    constructor() {
        super();
        this.state = {
            
        }
    }

    componentWillMount(){
        const token = this.props.authReducer.user.data.token;
        const orderId = this.props.location.state.orderId;
        this.props.dispatch(CostGet(token,orderId));
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
    }
   
    render() {
        document.title="成本";
        const cost = this.props.costReducer.cost.data;
        if(cost != undefined){
            return (
                <div className="main-wrap bg-grey">
                    <div className="me-info">
                        <p className="info-title">成本<span className="icon iconfont icon-xiala pull-right"></span></p>
                        <ul className="infoList">
                            <li>
                                <span>TT开证手续费</span> <span>{cost.TTProcedureFee}</span>
                            </li>
                            <li>
                                <span>TT开证代理费</span> <span>{cost.TTAgencyFee}</span>
                            </li>
                            <li>
                                <span>开证利息</span> <span>{cost.issuingInterest}</span>
                            </li>
                            <li>
                                <span>通关费</span> <span>{cost.customscostFee}</span>
                            </li>
                            <li>
                                <span>3C费用</span> <span>{cost.cccFee}</span>
                            </li>
                            <li>
                                <span>许可证费用</span> <span>{cost.licenceFee}</span>
                            </li>
                            <li>
                                <span>开票费用</span> <span>{cost.makeInvoiceFee}</span>
                            </li>
                            <li>
                                <span>杂费</span> <span>{cost.incidentals}</span>
                            </li>
                            <li>
                                <span>汽车价格</span> <span>{cost.carPrice}</span>
                            </li>
                            <li>
                                <span>税费</span> <span>{cost.summary}</span>
                            </li>
                            <li>
                                <span>二次押汇</span> <span>{cost.twiceDocumentaryCredit}</span>
                            </li>
                            <li>
                                <span>开票金额</span> <span>{cost.makeInvoiceMoney}</span>
                            </li>
                            <li>
                                <span>实际应付款</span> <span>{cost.accountPayable}</span>
                            </li>
                            <Imglist src={cost.paymentBillUrl} alt="付款回单链接"/>
                        </ul>
                    </div>

                </div>
            )
        }else{
            return <div></div>
        }
    }
}


export default connect((state) => {
    const { authReducer,costReducer } = state;
    return {
        authReducer,costReducer
    }
})(Cost);